<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>搜索结果</title>
  <!--  <link type="text/css" rel="stylesheet" href="css/result.css"/>-->
  <th:block th:include="/common/pub_head::default"></th:block>
  <th:block th:include="/common/pub_head::layui"></th:block>
  <style>
    p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
      line-height: 20px;
    }
  </style>
</head>
<body>
<div class="layui-row">
  <div class="layui-row">
    <div class="layui-col-md12" style="text-align: center">
      <div class="layui-form-item" style="margin: 15px 0 5px 50px">
        <div style="float: left">
          <a href="/" style="color: #009688;font-size: 25px;font-weight: bold">文件搜索&nbsp;&nbsp;</a>
        </div>
        <div style="float: left; width: 50%">
          <input type="text" name="keyword" placeholder="请输入任意内容" autocomplete="off"
                 class="layui-input" id="keyword"/>
        </div>
        <div style="float: left">
          <button onclick="loadPage()" class="layui-btn">搜搜</button>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-row" id="noData"
         style="color:darkgrey;font-size: 30px;margin: 10px;text-align: center;">
      无相关信息
    </div>
    <div class="layui-row" style="margin: 10px 0 0 50px">
      <div class="layui-col-md7" id="contentDiv">
      </div>
    </div>
    <div class="layui-row" style="text-align: left; margin-left: 40px">
      <div id="page"></div>
    </div>
  </div>
</div>
<div id="imgBox"></div>
<div id="contentModel" style="display: none">
  <li style="margin-bottom: 10px">
    <a class="title" target="_self"
       style="color: #01AAED;font-size: 22px;line-height: 40px">文件标题</a>
    <p>文件内容</p>
  </li>
</div>
<script th:inline="javascript">
  // <![CDATA[
  var laypage;
  layui.use(['form', 'jquery', 'laypage'], function () {
    laypage = layui.laypage;
  });
  loadPage();

  function loadPage() {
    var URL = path + '/find';
    var keyword = $("#keyword").val();
    var formData = {
      pn: 1,
      pageSize: 10,
      keyword: keyword
    };
    $.post(URL, formData, function (jsonData) {
      laypage.render({
        elem: 'page',
        count: jsonData.count,
        jump: function (obj, first) {
          if (first) {
            readerData(jsonData.resultList);
          } else {
            formData = {
              pn: obj.curr,
              pageSize: 10,
              keyword: keyword
            };

            $.post(URL, formData, function (jsonData) {
              readerData(jsonData.resultList);
            }, "json");
          }
        }
      });
    }, 'json');

  }

  function readerData(resultList) {
    if (resultList && resultList.length > 0) {
      $('#noData').hide();
      var domEle = "";
      $.each(resultList, function (index, obj) {
        var contentModel = $("#contentModel").clone();
        $('a', contentModel).html(obj.title);
        $('a', contentModel).attr("esId", obj.esId);
        $('a', contentModel).attr('href', path + '/file/download?fileName=' + obj.fileName + '&path=' + obj.filePath);
        $('p', contentModel).html(obj.filecontent);

        domEle += contentModel.html();
      });
      $("#contentDiv").html(domEle);
    } else {
      $("#contentDiv").html("");
      $('#noData').show();
    }
  }

  document.onkeydown = keyDown;
  function keyDown(event) {
    if (event.keyCode == 13) {
      loadPage();
    }
  }
  // ]]>
</script>
</body>
</html>